<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>033-行内块元素幽灵空格问题</title>
		<style>
			div {
				width: 600px;
				background-color: skyblue;
			}

			img {
				height: 500px;
				vertical-align: bottom;
			}
		</style>
	</head>
	<body>
		<!--
    行内块元素幽灵空白问题是因为，行内块元素与文本基线对齐，而文本基线与文本最底端之间是有一定距离的。
    解决方案：给行内块设置 vertical-align 属性，值不为 baseline，即可解决幽灵空白，设置为 middle、bottom、top 均可。
     -->
		<div><img src="https://www.runoob.com/try/demo_source/logo.png" alt="" />xg</div>
	</body>
</html>
